<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="proandcity.js"></script>
    <script>
        function $(id) {
            return document.getElementById(id);
        }

        window.onload = function () {
            var proStr = "";
            var cityStr = "";
            provinceArr.forEach(n => {
                proStr += `<option>${n.name}</option>`;
            });
            $("province").innerHTML = proStr;
            var newCityArr = cityArr.filter(n => n.provinceCode == "1");
            newCityArr.forEach(n => {
                cityStr += `<option>${n.name}</option>`;
            });
            $("city").innerHTML = cityStr;
        }

        function changeCity(province) {
            var str = "";
            // alert(province.value);
            var pro = provinceArr.find(n => n.name == province.value);
            var arr = cityArr.filter(n => n.provinceCode == pro.code);
            arr.forEach(n => {
                str += `<option>${n.name}</option>`;
            })
            $("city").innerHTML = str;
        }

    </script>
</head>

<body>
<select id="province" value="四川省" onchange="changeCity(this)"></select>
<select id="city"></select>
</body>
</html>